<template>
    <div>
        <el-form :model="form.data" label-width="auto" ref="formRef">
            <el-form-item label="模块间隙">
                <el-slider v-model="form.data.space" :step="1" :max="20"> </el-slider>
                <el-input
                    style="width: 58px; margin-left: 8px"
                    v-model="form.data.space"
                    @change="changeSpace"
                    type="number"
                    onkeyup="value=value.replace(/[^\d]/g,'')" />
                <span style="margin-left: 8px">像素</span>
            </el-form-item>
            <el-form-item label="预设文字">
                <el-input v-model="form.data.title" placeholder="请填写预设文字" />
            </el-form-item>
            <el-form-item label="文本位置">
                <el-radio-group v-model="form.data.position">
                    <el-radio :label="1">居左</el-radio><el-radio :label="0">居中</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="背景颜色">
                <el-color-picker v-model="form.data.color" />
            </el-form-item>
        </el-form>
    </div>
</template>
<script setup>
import { ref, reactive, watch } from 'vue';
const props = defineProps(['comIndex', 'components', 'tabparam']);
const emit = defineEmits(['changeSetting']);
let form = reactive({
    data: { pageCode: '', space: 0, title: '', position: 1, color: '#fff', tabs: props.tabparam }
});
let allitem = ref([]);
const changeSpace = () => {
    form.data.space = Number(form.data.space);
};
watch(
    () => form.data,
    val => {
        emit('changeSetting', { ...form.data, name: 'search', index: props.comIndex ? props.comIndex : 0 });
    },
    {
        deep: true
    }
);
watch(
    () => props.comIndex,
    val => {
        allitem.value = props.components;
        if (allitem.value.length) {
            form.data = allitem.value[val].options;
        } else {
            form.data = { pageCode: '', space: 0, title: '', position: 1, color: '#fff', tabs: props.tabparam };
        }
    },
    { immediate: true }
);
watch(
    () => props.components,
    val => {
        if (val.length && Object.keys(val[props.comIndex].options).length) {
            form.data = val[props.comIndex].options;
        } else {
            form.data = { pageCode: '', space: 0, title: '', position: 1, color: '#fff', tabs: props.tabparam };
        }
    },
    { immediate: true, deep: true }
);
</script>
<style lang="scss" scoped>
:deep(.el-slider) {
    width: 100px;
}
.content {
    width: 100%;
    box-sizing: content-box;
    padding: 16px;
    .item {
        width: 50%;
        padding-right: 10px;
        box-sizing: content-box;
    }
}
</style>
